<template>
  <div class="fixed bottom-8 right-8 z-50">
    <!-- 主按钮 -->
    <button @click="toggleMenu"
      class="p-3 w-12 h-12 bg-indigo-500 hover:bg-indigo-600 text-white rounded-full shadow-lg transition-all duration-300 dark:bg-gray-700 dark:hover:bg-gray-600 flex items-center justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform transition-transform duration-300"
        :class="{ 'rotate-180': isOpen }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          :d="isOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'" />
      </svg>
    </button>

    <!-- 子菜单按钮组 -->
    <transition-group name="menu" tag="div" class="absolute bottom-full right-0 mb-4 flex flex-col gap-3">

      <!-- 回到顶部 -->
      <button v-if="isOpen" @click="scrollToTop" key="to-top"
        class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-0"
        :class="{ 'scale-100': isOpen }">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
      </button>


      <!-- 暗色模式切换 -->
      <button v-if="isOpen" @click="systemStore.changeStatus()" key="dark-mode"
        class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-0"
        :class="{ 'scale-100': isOpen }">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
          v-if="systemStore.isDark">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
          stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>

      </button>
      <!-- 回到顶部 -->
      <button v-if="isOpen" @click="scrollToTop" key="to-top"
        class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-0"
        :class="{ 'scale-100': isOpen }">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
        </svg>
      </button>

      <!-- 反馈按钮 -->
      <button v-if="isOpen" @click="showFeedback" key="feedback"
        class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-0"
        :class="{ 'scale-100': isOpen }">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
      </button>

      <!-- 关于我 -->
      <button v-if="isOpen" @click="navigateTo('/AboutMe')" key="feedback"
        class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-0"
        :class="{ 'scale-100': isOpen }">
        <svg t="1749533098884" class="icon" viewBox="0 0 1041 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4392" width="25" height="25">
          <path
            d="M524.575 975.495c255.102 0 459.902-206.597 459.902-461.699S779.677 53.895 524.575 53.895 62.877 258.695 62.877 513.796s206.597 461.699 461.698 461.699z m0 46.709c-280.252 0-506.61-228.155-506.61-508.408S244.323 7.186 524.575 7.186s506.611 226.358 506.611 506.61-226.358 508.408-506.61 508.408z m26.948-795.846c-16.169 0-28.744 5.39-41.32 16.168-10.778 10.78-17.964 25.151-17.964 41.32s5.39 28.743 17.965 41.319c10.778 10.779 25.15 16.168 41.319 16.168 16.168 0 28.744-5.39 41.32-16.168 10.778-10.779 16.168-25.151 16.168-41.32 0-16.168-5.39-28.743-16.169-41.319-12.575-10.779-25.15-16.168-41.32-16.168z m-3.593 513.796c-5.39-5.39-7.186-16.168-7.186-30.54 0-5.39 0-14.372 1.796-25.15 1.797-10.78 3.593-21.559 5.39-30.541l21.558-111.383c1.796-10.779 3.593-21.558 3.593-34.133s1.796-21.558 1.796-25.15c0-23.355-5.39-43.117-17.965-57.489-10.779-14.372-26.947-21.557-48.505-21.557-10.779 0-23.354 3.593-37.726 8.982-12.576 5.39-26.948 12.575-41.32 21.558l-5.39 34.133c3.594-1.796 8.983-5.39 14.373-7.186 5.39-1.796 12.575-3.593 17.965-3.593 10.779 0 19.761 3.593 23.354 8.983 3.593 5.39 5.39 16.168 5.39 30.54 0 7.186 0 16.168-1.797 25.15-1.796 8.983-3.593 19.762-5.39 30.541l-19.76 111.383c-1.797 12.575-3.594 21.558-3.594 30.54-1.796 8.983-1.796 17.965-1.796 26.947 0 23.355 5.39 41.32 17.965 57.488 12.575 14.372 28.744 21.558 50.301 21.558 14.372 0 25.151-1.796 35.93-7.186 10.78-5.39 25.151-12.575 41.32-23.354l5.39-34.134-14.373 7.186c-7.186 1.797-12.575 3.593-17.965 3.593-10.779 1.797-19.761-1.796-23.354-7.186z"
            fill="#1296DB" p-id="4393"></path>
        </svg>
      </button>
    </transition-group>
  </div>

  <!-- 反馈对话框 -->
  <div v-if="feedBackDialog" class="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
    <div class="bg-white p-6 rounded-lg shadow-lg w-96">
      <h2 class="text-2xl font-bold mb-4">联系作者</h2>
      <textarea v-model="feedbackContent" class="w-full p-2 border border-gray-300 rounded mb-4" rows="4"
        placeholder="想对作者说点什么..."></textarea>

      <textarea v-model="feedbackAuthor" class="w-full p-2 border border-gray-300 rounded mb-4" rows="1"
        placeholder="请输入您的联系方式..."></textarea>

      <div class="flex justify-end">
        <button @click="feedBackDialog = false" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 mr-2">
          取消
        </button>
        <button @click="" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          提交
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { systemStatus } from '../../ts/pinia'
let systemStore = systemStatus()
let feedBackDialog = ref(false)

const isOpen = ref(false)  // 右下角的菜单是否打开 

// 菜单是否打开
const toggleMenu = () => {
  isOpen.value = !isOpen.value
}

// 回到顶部按钮
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
// 显示反馈对话框
const showFeedback = () => {
  feedBackDialog.value = true
}
// 导航函数
let router = useRouter()
function navigateTo(path: string) {
  router.push(path)
}

// 反馈的内容
let feedbackContent = ref('');
let feedbackAuthor = ref('')

</script>



<style>
/* 优化后的过渡动画 */
.menu-enter-active,
.menu-leave-active {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.menu-enter-from {
  opacity: 0;
  transform: translateY(20px) scale(0.5);
}

.menu-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.5);
}
</style>